<script setup lang="ts">
import { ArrowRight, Delete, Edit } from '@element-plus/icons-vue'
import GeekChannels from '@/compontents/Geek-Channels.vue'
import { ref, watch } from 'vue'
import type { ArticleItem, ArticleParams } from '@/types/article'
import { delArticleAPI, getArticleListAPI } from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus'
const params = ref<ArticleParams>({
  status: null,
  channel_id: null,
  begin_pubdate: null,
  end_pubdate: null,
  page: 1,
  per_page: 2,
})

const ArticleList = ref<ArticleItem[]>([])
const total = ref(0)
const getArticleList = async () => {
  const res = await getArticleListAPI(params.value)
  // console.log(res)
  ArticleList.value = res.data.results
  total.value = res.data.total_count
}
getArticleList()

const dateArr = ref([])
watch(dateArr, () => {
  if (dateArr.value) {
    params.value.begin_pubdate = dateArr.value[0]
    params.value.end_pubdate = dateArr.value[1]
  } else {
    params.value.begin_pubdate = ''
    params.value.end_pubdate = ''
  }
})

// 筛选
const onsubmit = () => {
  params.value.page = 1
  getArticleList()
}

// 删除文章
const delArticle = (id: string) => {
  // console.log(id)
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await delArticleAPI(id)
      ElMessage.success('删除成功')
      getArticleList()
    })
    .catch(() => {})
}
</script>

<template>
  <el-card>
    <template #header>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <el-form label-width="120px">
      <el-form-item label="状态：">
        <el-radio-group v-model="params.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核成功</el-radio>
          <el-radio :label="3">审核失败</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道：" style="width: 450px">
        <GeekChannels v-model="params.channel_id" />
      </el-form-item>
      <el-form-item label="日期：" style="width: 450px">
        <el-date-picker
          v-model="dateArr"
          type="datetimerange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsubmit">筛选</el-button>
      </el-form-item>
    </el-form>
    {{ params }}
  </el-card>

  <el-card class="box-card">
    <template #header>
      <div>根据筛选条件共查询到 {{ total }} 条数据</div>
    </template>
    <el-table :data="ArticleList">
      <el-table-column label="封面">
        <template #default="scope">
          <el-image
            :src="scope.row.cover.images[0]"
            :preview-src-list="scope.row.cover.images"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            style="width: 100px; height: 100px"
            :initial-index="4"
            preview-teleported="true"
            fit="cover"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="Info">草稿</el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">待审核</el-tag>
          <el-tag v-if="scope.row.status === 2" type="success">审核成功</el-tag>
          <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="pubdate"> </el-table-column>
      <el-table-column label="阅读数" prop="read_count"> </el-table-column>
      <el-table-column label="评论数" prop="comment_count"> </el-table-column>
      <el-table-column label="点赞数" prop="like_count"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" circle plain @click="$router.push(`/publish/${scope.row.id}`)"
            ><el-icon><Edit /></el-icon
          ></el-button>
          <el-button type="danger" circle plain @click="delArticle(scope.row.id)"
            ><el-icon><Delete /></el-icon
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-model:current-page="params.page"
      v-model:page-size="params.per_page"
      @change="getArticleList"
    />
  </el-card>
</template>

<style scoped>
/* 样式 */
.el-pagination {
  margin-top: 10px;
}
.box-card {
  margin-top: 20px;
}
</style>
